<template>
  <div class="return-reminder-container">
    <div class="page-header">
      <div class="title">归还提醒功能</div>
      <div class="subtitle">智能提醒系统</div>
    </div>

    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item
          ><router-link to="/files"><FolderOutlined />档案文件管理</router-link></a-breadcrumb-item
        >
        <a-breadcrumb-item
          ><router-link to="/files/borrow-system"><AuditOutlined />档案借阅系统</router-link></a-breadcrumb-item
        >
        <a-breadcrumb-item><BellOutlined />{{ $route.meta.title }}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <div class="content-section">
      <a-row :gutter="[24, 24]">
        <a-col :span="16">
          <a-card title="提醒记录" :bordered="false">
            <a-table :columns="reminderColumns" :data-source="reminders" :pagination="{ pageSize: 10 }">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'status'">
                  <a-tag :color="getStatusColor(record.status)">{{ record.status }}</a-tag>
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>

        <a-col :span="8">
          <a-card title="提醒设置" :bordered="false">
            <a-form layout="vertical">
              <a-form-item label="提醒时间">
                <a-select placeholder="选择提醒时机">
                  <a-select-option value="3">到期前3天</a-select-option>
                  <a-select-option value="7">到期前7天</a-select-option>
                  <a-select-option value="1">到期前1天</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="提醒方式">
                <a-checkbox-group>
                  <a-checkbox value="email">邮件提醒</a-checkbox>
                  <a-checkbox value="sms">短信提醒</a-checkbox>
                  <a-checkbox value="system">系统通知</a-checkbox>
                </a-checkbox-group>
              </a-form-item>
              <a-form-item>
                <a-button type="primary">保存设置</a-button>
              </a-form-item>
            </a-form>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { HomeOutlined, FolderOutlined, AuditOutlined, BellOutlined } from '@ant-design/icons-vue'

const reminderColumns = [
  { title: '借阅者', dataIndex: 'borrower', key: 'borrower' },
  { title: '档案名称', dataIndex: 'fileName', key: 'fileName' },
  { title: '提醒时间', dataIndex: 'reminderTime', key: 'reminderTime' },
  { title: '提醒方式', dataIndex: 'reminderMethod', key: 'reminderMethod' },
  { title: '状态', key: 'status' }
]

const reminders = ref([
  { borrower: '李时珍', fileName: '生死簿第123卷', reminderTime: '2023-12-10', reminderMethod: '邮件', status: '已发送' },
  { borrower: '王守仁', fileName: '业力评定册', reminderTime: '2023-12-12', reminderMethod: '短信', status: '待发送' }
])

const getStatusColor = (status) => {
  const colorMap = {
    已发送: 'success',
    待发送: 'processing',
    发送失败: 'error'
  }
  return colorMap[status] || 'default'
}
</script>

<style lang="scss" scoped>
.return-reminder-container {
  padding: 24px;

  .page-header {
    text-align: center;
    margin-bottom: 24px;

    .title {
      font-size: 28px;
      font-weight: bold;
      color: $secondary-color;
      margin-bottom: 8px;
    }

    .subtitle {
      font-size: 14px;
      color: $text-secondary;
    }
  }

  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  .content-section {
    :deep(.ant-card) {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 12px;
    }
  }
}
</style>
